<template>
  <div>
    <!--    <div>____________________________</div>-->

    <!--      添加化合物按钮区域-->
    <el-card style="margin-top: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <div class="manager-all">
          <div class="project-manager"></div>
          <div class="project-item">
            <el-breadcrumb-item :to="{ path: '/' }"
            >项目列表
            </el-breadcrumb-item>
          </div>
        </div>
        <!-- <el-breadcrumb-item>菜单管理</el-breadcrumb-item> -->
        <hr
          style="width: 1642px;
                 height: 1px;
                 border:none;
                 background: #E8ECF0;
                 margin-left:-23px;"
        />
      </el-breadcrumb>
      <div style="margin-top:20px;display:flex;justify-content:space-between;">
        <div>
          <!--          <el-button type="primary" @click="myMd" class="add"-->
          <!--          >我的化合物(只读)-->
          <!--          </el-button>-->
          <!--          <el-button type="primary" @click="otherMdOR" class="add"-->
          <!--          >分享化合物(只读)-->
          <!--          </el-button>-->
          <!--          <el-button type="primary" @click="otherMdRW" class="add"-->
          <!--          >分享化合物(读写)-->
          <!--          </el-button>-->
          <el-button type="primary" @click="addFormVisible = true" class="add"
          ><img src="../../icon标/添加数据.png" class="addimg" alt=""/>
            添加数据
          </el-button>
          <el-button
            style="width:157px !important;"
            type="primary"
            class="add"
            @click="downloadAllCompound()"
          >图片内嵌Excel下载
          </el-button>
          <el-button
            type="primary"
            class="add"
            @click="downloadAllCompoundAndPic()"
          >
            打包全部下载
          </el-button>
        </div>

        <div>
          <el-input
            v-model="query"
            clearable
            placeholder="搜索想要查找的内容"
            @clear="getMdList"
            class="input"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getMdList"
            ></el-button>
          </el-input>
          <el-button
            @click="searchid"
            class="add"
            type="primary"
            style="width:120px !important;height:36px !important;margin-left:10px;"
          >
            高级搜索
            <img
              src="../../icon标/定位.png"
              alt=""
              style="margin-left:8px;margin-top:-5px;"
            />
          </el-button>
          <el-button
            class="add"
            type="primary"
            style="width:36px !important;height:36px !important;"
            @click="resetid()"
          >
            <img
              src="../../icon标/刷新.png"
              alt=""
              style="margin-left:-8px;margin-top:-5px;"
            />
          </el-button>
        </div>
      </div>
      <div class="MDsearch" v-if="search == true">
        <el-row style="display:flex;align-items:center;">
          请输入要下载的化合物范围 :
          <el-form style="display:flex;margin-top:25px;margin-left:10px;">
            <el-form-item label="">
              <el-input
                @input="inputChange"
                v-model="selectMin"
                placeholder="请输入化合物ID"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="—" style="margin-left:10px;"></el-form-item>
            <el-form-item label="">
              <el-input
                @input="inputChange"
                v-model="selectMax"
                placeholder="请输入化合物ID"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </el-row>

        <div class="MDbutton">
          <el-button
            style="width:157px !important;"
            type="primary"
            plain
            class="add"
            @click="downloadCompound()"
          >图片内嵌Excel下载
          </el-button>
          <el-button
            type="primary"
            plain
            class="add"
            @click="downloadCompoundAndPic()"
          >
            打包全部下载
          </el-button>
        </div>
      </div>
      <!-- 索引列 -->
      <!--      角色列表区域-->
      <!--        <el-table-column type="index" label="#"></el-table-column>-->
      <el-table
        :data="mdList"
        border
        stripe
        style="width:100%"
        class="mdTable"
        :header-cell-style="{ background: '#F6F7FB' }"
        @select="handleSelectionChange"
        @select-all="handleSelectionChange"
        :row-key="getRowMDKeys"
      >
        <el-table-column
          type="selection"
          width="55"
          prop="isCheck"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column label="化合物编号" prop="sid"></el-table-column>
        <el-table-column
          label="化合物结构smiles"
          prop="structureSmiles"
        ></el-table-column>
        <el-table-column label="录入人员" prop="keyboarder"></el-table-column>
        <el-table-column
          label="信息录入日期"
          prop="inputDate"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="btn-all">
              <div class="bj" v-if="scope.row.perm === 0">
                <!-- <i class="el-icon-edit-outline" style="color:#409EFF;"></i> -->
                <img src="../../icon标/编辑.png" alt=""/>

                <el-link
                  :underline="false"
                  type="primary"
                  @click="showEditDialog(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;margin-top:-5px;"
                >编辑
                </el-link>
              </div>
              <div class="sx" v-if="scope.row.perm === 0"></div>
              <div class="xq">
                <!-- <i class="el-icon-view" style="color:#67C23A;"></i> -->
                <img src="../../icon标/查看 (1).png" alt=""/>
                <router-link
                  type="success"
                  :underline="false"
                  @click="removeMdBySid(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;"
                  :to="{path:'/DetailsPage/'+scope.row.sid,query:{page:queryInfo.page,size:queryInfo.size}}"
                >详情
                </router-link>
              </div>
              <div class="sx"></div>
              <div class="sc">
                <!-- <i class="el-icon-delete" style="color:#F56C6C;"></i> -->
                <img src="../../icon标/删除.png" alt=""/>
                <el-link
                  type="danger"
                  :underline="false"
                  @click="removeMdBySid(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;margin-top:-5px;"
                >删除
                </el-link>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页区域-->
      <el-pagination
        background
        :current-page="queryInfo.page"
        :page-size="queryInfo.size"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!--添加化合物的弹出框-->
      <!--    prop.sync表示这个子组件会修改父组件的值，v-model表示这是个表单类型的组件。-->
      <!--      ※ 放大缩小容易乱样式 先把width写死了-->
      <el-dialog
        :visible.sync="addFormVisible"
        title="分子设计"
        width="1300px"
        @close="addMdClosed"
      >
        <hr
          style=" margin-top:-30px;border:none;background:#4087fc;height:1.5px;"
        />
        <hr
          style="margin-top:-9px;border:none;height:3px;width:100px;background:#4087fc;margin-left:0px;"
        />
        <!--            :rules先不写了-->
        <el-form
          :model="addForm"
          ref="addMdRef"
          label-width="140px"
          class="molecular-design"
        >
          <el-row :gutter="0">
            <el-row style="margin-top:30px;">
              <el-col :span="8">
                <el-form-item label="化合物结构smiles :" prop="structureSmiles">
                  <el-input v-model="addForm.structureSmiles"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="研发项目 :" prop="project">
                  <el-input v-model="addForm.project"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分子量 :" prop="mw">
                  <el-input v-model="addForm.mw"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="理论值 clog P :" prop="clogP">
                  <el-input v-model="addForm.clogP"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="理论值 tPSA :" prop="tpsa">
                  <el-input v-model="addForm.tpsa"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="理论值 HBD :" prop="hbd">
                  <el-input v-model="addForm.hbd"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="信息录入日期 :" prop="inputDate">
                  <el-date-picker
                    v-model="addForm.inputDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <!--                <el-col :span="8">-->
              <!--                  <el-form-item label="信息录入人员 :" prop="keyboarder">-->
              <!--                    <el-input v-model="addForm.keyboarder"></el-input>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <el-col :span="8">
                <el-col>
                  <el-form-item label="设计人员 :" prop="designer">
                    <el-input v-model="addForm.designer"></el-input>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="化合物结构 :" prop="structureUrl">
                  <el-upload
                    v-model="addForm.structureUrl"
                    class="upload-demo"
                    ref="cs"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handleCsRemove"
                    :on-success="csHandleSuccess"
                    :on-error="csHandleError"
                    :file-list="fileList"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt=""/>
                    </div>
                    <div class="el-upload__text">
                      选取jpg/png文件
                    </div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="评估模型 :" prop="moduleUrl">
                  <el-upload
                    v-model="addForm.moduleUrl"
                    class="upload-demo"
                    ref="am"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPse`"
                    :on-preview="handlePreview"
                    :on-remove="handleAmRemove"
                    :on-success="amHandleSuccess"
                    :on-error="amHandleError"
                    :file-list="fileList"
                    :before-upload="beforePseUpload"
                    drag
                    :headers="headerObj"
                  >
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取文件.png" alt=""/>
                    </div>
                    <div class="el-upload__text">
                      选取pse文件
                    </div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否合成 :" prop="compound">
                  <el-switch v-model="addForm.compound"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="18">
              <el-col :span="3.5">
                <span style="padding-left:60px;color:#333333">运算方式 :</span>
              </el-col>
              <el-col :span="16">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="ADMET"></el-checkbox>
                  <el-checkbox label="KINOME"></el-checkbox>
                  <el-checkbox label="Generative"></el-checkbox>
                  <el-checkbox label="CoCrystal"></el-checkbox>
                  <el-checkbox label="ScaffHop"></el-checkbox>
                  <el-checkbox label="iDEL"></el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <!--      底部区域-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="addMd"
            style="margin-left:50px;margin-bottom:15px;"
          >确 定</el-button
          >
        </span>
      </el-dialog>
      <!--修改用户的对话框-->
      <el-dialog
        title="修改化合物"
        :visible.sync="editMdVisible"
        width="1300px"
        @close="editMdClosed"
      >
        <hr
          style=" margin-top:-30px;border:none;background:#4087fc;height:1.5px;"
        />
        <hr
          style="margin-top:-9px;border:none;height:3px;width:100px;background:#4087fc;margin-left:0px;"
        />
        <el-form
          :model="editForm"
          :rules="editMdRules"
          ref="editMdRef"
          label-width="140px"
        >
          <!--          让其重新上传？ 还要给他下载的位置？-->
          <el-row :gutter="0">
            <el-row style="margin-top:30px;">
              <el-col :span="8">
                <el-form-item label="化合物编号 :" prop="sid">
                  <el-input v-model="editForm.sid" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="虚拟化合物编号 :" prop="vid">
                  <el-input v-model="editForm.vid" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="化合物结构smiles :" prop="structureSmiles">
                  <el-input v-model="editForm.structureSmiles"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="研发项目 :" prop="project">
                  <el-input v-model="editForm.project"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分子量 :" prop="mw">
                  <el-input v-model="editForm.mw"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="理论值 clog P :" prop="clogP">
                  <el-input v-model="editForm.clogP"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="理论值 tPSA :" prop="tpsa">
                  <el-input v-model="editForm.tpsa"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="理论值 HBD :" prop="hbd">
                  <el-input v-model="editForm.hbd"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="信息录入日期 :" prop="inputDate">
                  <el-date-picker
                    v-model="editForm.inputDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!--                <el-col :span="8">-->
              <!--                  <el-form-item label="信息录入人员 :" prop="keyboarder">-->
              <!--                    <el-input v-model="editForm.keyboarder"></el-input>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <el-col :span="8">
                <el-form-item label="设计人员 :" prop="designer">
                  <el-input v-model="editForm.designer"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否合成 :" prop="compound">
                  <el-switch v-model="compound"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="化合物结构 :" prop="structureUrl">
                  <el-upload
                    v-model="editForm.structureUrl"
                    class="upload-demo"
                    ref="cs"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handleCsRemove"
                    :on-success="csHandleSuccess"
                    :on-error="csHandleError"
                    :file-list="fileList"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件
                      </div> -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt=""/>
                    </div>
                    <div class="el-upload__text">
                      选取jpg/png文件
                    </div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="评估模型 :" prop="moduleUrl">
                  <el-upload
                    v-model="editForm.moduleUrl"
                    class="upload-demo"
                    ref="am"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPse`"
                    :on-preview="handlePreview"
                    :on-remove="handleAmRemove"
                    :on-success="amHandleSuccess"
                    :on-error="amHandleError"
                    :file-list="fileList"
                    :before-upload="beforePseUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <div slot="tip" class="el-upload__tip">
                        只能上传pse文件
                      </div> -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取文件.png" alt=""/>
                    </div>
                    <div class="el-upload__text">
                      选取pse文件
                    </div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="18">
              <el-col :span="3.5">
                <span style="padding-left:60px;color:#333333">运算方式 :</span>
              </el-col>
              <el-col :span="16">
                <el-checkbox-group v-model="MDcheckList">
                  <el-checkbox label="ADMET"></el-checkbox>
                  <el-checkbox label="KINOME"></el-checkbox>
                  <el-checkbox label="Generative"></el-checkbox>
                  <el-checkbox label="CoCrystal"></el-checkbox>
                  <el-checkbox label="ScaffHop"></el-checkbox>
                  <el-checkbox label="iDEL"></el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editMdVisible = false" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="editMd"
            style="margin-left:50px;margin-bottom:15px;"
          >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import {getCookie} from "../../utils/util";

export default {
  //分子设计
  name: "MolecularDesign",
  data() {
    return {
      checkList: ["ADMET", "KINOME"],
      MDcheckList: ["ADMET", "KINOME"],
      selectValue: [0, 0],
      selectMax: "",
      selectMin: "",
      multipleSelection: [],
      multipleSelectionSid: [],
      search: false,
      // 所有角色列表
      mdList: [],
      // 以下是弹出框
      //是否显示弹出框
      addFormVisible: false,
      //要提交的表单信息
      addForm: {
        structureUrl: "",
        structureSmiles: "",
        vid: "",
        sid: "",
        mw: "",
        clogP: "",
        tpsa: "",
        hbd: "",
        designer: "",
        project: "",
        moduleUrl: "",
        compound: true,
        inputDate: "",
        type: 1
      },
      //有个name 有个url
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
      queryInfo: {
        query: "",
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        size: 5,
        type: 1
        // token:''
      },
      total: 0,
      // 监听 分页的size 改变的事件
      query: "",
      // 控制修改用户对话框的显示和隐藏
      editMdVisible: false,
      // 查询到的用户信息对象
      compound: true,
      editForm: {
        structureUrl: "",
        structureSmiles: "",
        vid: "",
        sid: "",
        mw: "",
        clogP: "",
        tpsa: "",
        hbd: "",
        designer: "",
        project: "",
        moduleUrl: "",
        // compound: true,
        inputDate: "",
        type: 1
      },
      editMdRules: {
        // email: [
        //   {
        //     required: true,
        //     message: '请输入密码',
        //     trigger: 'blur'
        //   },
        //   {
        //     validator: checkEmail,
        //     trigger: 'blur'
        //   }
        // ],
        // mobile: [
        //   {
        //     required: true,
        //     message: '请输入手机号码',
        //     trigger: 'blur'
        //   },
        //   {
        //     validator: checkMobile,
        //     trigger: 'blur'
        //   }
        // ]
      },
      headerObj: {
        token: getCookie("token")
      },
      url: this.now_url.now_url

    };
  },
  created() {
    var query = this.$route.query
    console.log(query.page)
    if (query.page != null) {
      this.queryInfo.page = Number(query.page)
    }
    if (query.size != null) {
      this.queryInfo.size = Number(query.size)
    }
    this.getMdList();
  },
  mounted() {
    let times = new Date().getTime();
    // console.log(times)
    this.addForm.inputDate = times;
  },
  methods: {
    resetid() {
      // return (this.search = false),
      (this.selectValue = [0, 0]), (this.selectMax = ""), (this.selectMin = "");
    },
    inputChange(e) {
      //强制刷新
      this.$forceUpdate();
    },
    searchid: function () {
      return (
        (this.search = !this.search),
          (this.selectValue = [0, 0]),
          (this.selectMax = ""),
          (this.selectMin = "")
      );
    },
    async getMdList() {
      if (this.query === "") {
        this.queryInfo.query = -1;
      } else {
        this.queryInfo.query = this.query;
      }
      const {data: res} = await this.$axios.get("get", {
        params: this.queryInfo
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取信息列表失败！");
      }
      this.mdList = res.data;
      this.total = res.total;
    },
    handleSizeChange(newSize) {
      this.$router.push({path: '/add/molecularDesign', query: {page: this.queryInfo.page, size: this.queryInfo.size}})
      this.queryInfo.size = newSize;
      this.getMdList();
      console.log(`每页 ${newSize} 条`);
    },
    // 监听 分页的page 改变的事件
    handleCurrentChange(newPage) {
      this.$router.push({path: '/add/molecularDesign', query: {page: this.queryInfo.page, size: this.queryInfo.size}})
      this.queryInfo.page = newPage;
      this.getMdList();
      console.log(`当前页: ${newPage}`);
    },
    onSubmit() {
      console.log("submit!");
    },
    //关闭表单的时候 重设内部属性为空
    addMdClosed() {
      this.$refs.addMdRef.resetFields();
      this.$refs.cs.clearFiles();
      this.$refs.am.clearFiles();
      this.addForm.moduleUrl = "";
      this.addForm.structureUrl = "",
        this.checkList = ["ADMET", "KINOME"]
    },
    //提交表单 发送请求
    addMd() {
      //可以设置如果添加了两个文件才允许提交 不过先写成可以直接提交的样子
      this.$refs.addMdRef.validate(async valid => {
        this.addForm.type = 1;
        // valid为False 请求失败
        // async 和 await 是等待执行操作，数据库操作是异步的
        console.log(this.addForm);
        if (!valid) return;
        // valid为True 此时可以发起添加用户的网络请求
        //第一个参数是路径 第二个参数提交的data

        const {data: res} = await this.$axios.put("save", this.addForm);
        console.log("ok");
        console.log(res);
        if (res.code !== 200) {
          this.$message.error("表单提交失败！");
        }
        this.$message.success("表单提交成功！");
        // 隐藏添加用户的对话框
        this.addFormVisible = false;
        // 重新获取用户的列表
        await this.getMdList();
      });
    },
    beforePicUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG || isPNG;
    },
    beforePseUpload(file) {
      // console.log(file)
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      const isPse = fileType === ".pse";
      console.log(fileName);
      console.log(fileType);
      console.log(isPse);
      if (!isPse) {
        this.$message.error("上传头像图片只能是 Pse 格式!");
      }
      return isPse;
    },
    handleCsRemove(file, fileList) {
      //删除之后 清空url
      this.editForm.structureUrl = "";
      this.addForm.structureUrl = "";
      // this.$message("文件已删除")
    },
    handleAmRemove(file, fileList) {
      //删除之后 清空url
      this.editForm.moduleUrl = "";
      this.addForm.moduleUrl = "";
      // this.$message("文件已删除")
    },
    handlePreview(file) {
      console.log(file);
    },
    csHandleSuccess(res, file) {
      // console.log(res)
      // console.log(file)
      this.editForm.structureUrl = res.msg;
      this.addForm.structureUrl = res.msg;
      this.$message.success("化合物结构提交成功！");
      console.log(this.mdList);
    },
    csHandleError() {
      this.$message.error("化合物结构提交失败！");
    },
    amHandleSuccess(res, file) {
      this.editForm.moduleUrl = res.msg;
      this.addForm.moduleUrl = res.msg;
      this.$message.success("评估模型提交成功！");
    },
    amHandleError() {
      this.$message.error("评估模型提交失败！");
    },
    //时间戳转化为时间
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },
    uploadPse(fileName) {
      console.log(fileName);
      if (!fileName) {
        this.$message.error("文件不存在!");
        return;
      }
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      const url = this.now_url.now_url+"server_static/" + fileName;
      //下载

      window.open(url);
    },
    async removeMdBySid(sid) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将永久删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          // 如果取消 会抛出一个错误error 这里用catch捕获他 然后返回error
          // 可以简写成.catch(err => err)
        }
      ).catch(error => {
        return error;
      });
      // 如果用户确认删除，返回值为字符串 confirm
      // 如果用户取消删除，返回值为字符串 cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("以取消删除");
      }
      // console.log('已删除用户')
      const {data: res} = await this.$axios.delete("/delete?sid=" + sid);
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("删除用户失败！");
      }
      this.$message.success("删除用户成功!");
      await this.getMdList();
    },
    // 展示编辑化合物的对话框
    showEditDialog(sid) {
      //通过sid找到mdList的相关信息
      for (let i = 0; i < this.mdList.length; i++) {
        if (sid === this.mdList[i].sid) {
          // this.editForm = this.mdList[i]
          this.editForm = JSON.parse(JSON.stringify(this.mdList[i]));
        }
      }
      if (this.editForm.sid == null) {
        return this.$message.error("未找到该化合物信息！");
      }
      this.editMdVisible = true;
    },
    //编辑按钮
    editMdClosed() {
      this.$refs.editMdRef.resetFields();
      this.$refs.cs.clearFiles();
      this.$refs.am.clearFiles();
      this.addForm.moduleUrl = "";
      this.addForm.structureUrl = "";
      this.MDcheckList = ['ADMET', 'KINOME']
    },
    // 修改化合物信息并提交
    editMd() {
      this.$refs.editMdRef.validate(async valid => {
        //source 0自己  1分享 2组 对应接口
        var source = this.editForm.source;
        this.editForm.type = 1;
        if (!valid) return;
        // 发起修改化合物信息的请求
        if (source === 0) {
          const {data: res} = await this.$axios.put("/update", this.editForm);
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else if (source === 1) {
          const {data: res} = await this.$axios.put(
            "/updateShare",
            this.editForm
          );
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else if (source === 2) {
          const {data: res} = await this.$axios.put(
            "/updateGroup",
            this.editForm
          );
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else {
          return this.$message.error("数据来源错误！");
        }
        // 关闭对话框
        this.editMdVisible = false;
        // 刷新数据列表
        await this.getMdList();
        // 提示修改成功
        this.$message.success("更新化合物结构成功");
      });
    },
    async downloadCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      console.log("最小值和最大值为");
      console.log(this.selectMin);
      console.log(this.selectMax);
      console.log("选择数组为");
      console.log(this.multipleSelectionSid);
      //返回msg和code
      const {data: res} = await this.$axios.post("generatePageType", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.msg;
      console.log(this.excelUrl);
      if (!this.excelUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      const url = this.now_url.now_url+"return_file/" + this.excelUrl;
      //下载

      window.open(url);
    },
    async downloadCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      console.log("最小值和最大值为");
      console.log(this.selectMin);
      console.log(this.selectMax);
      console.log("选择数组为");
      console.log(this.multipleSelectionSid);
      //返回msg和code
      const {data: res} = await this.$axios.post("generatePageTypeFile", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      let url1 = this.now_url.now_url+"return_file/" + this.excelUrl;
      let url2 = this.now_url.now_url+"return_file/" + this.rarUrl;
      let fileList = [url1, url2];
      console.log(fileList[0]);
      console.log(fileList[1]);
      for (let i = 0; i < fileList.length; i++) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; //防止影响页面
        iframe.style.height = 0; //防止影响页面
        iframe.src = fileList[i];
        document.body.appendChild(iframe); //这一行必须，iframe挂在到dom树上才会发请求//5分钟之后删除
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    },
    async downloadAllCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      console.log(this.queryInfo.type);
      const {data: res} = await this.$axios.get("/generateAllType", {
        params: {
          type: this.queryInfo.type
        }
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //也是返回一个
      this.excelUrl = res.msg;
      // this.rarUrl=res.pic
      console.log(this.excelUrl);
      if (!this.excelUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      const url = this.now_url.now_url+"return_file/" + this.excelUrl;
      //下载

      window.open(url);
    },
    async downloadAllCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //返回4个参数 msg为获取成功 code excel pic
      console.log("type为");
      console.log(this.queryInfo.type);
      const {data: res} = await this.$axios.get("generateAllTypeFile", {
        params: {
          type: this.queryInfo.type
        }
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      let url1 = this.now_url.now_url+"return_file/" + this.excelUrl;
      let url2 = this.now_url.now_url+"return_file/" + this.rarUrl;
      let fileList = [url1, url2];
      console.log(fileList[0]);
      console.log(fileList[1]);
      for (let i = 0; i < fileList.length; i++) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; //防止影响页面
        iframe.style.height = 0; //防止影响页面
        iframe.src = fileList[i];
        document.body.appendChild(iframe); //这一行必须，iframe挂在到dom树上才会发请求//5分钟之后删除
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelectionSid = [];
      if (this.multipleSelection) {
        this.multipleSelection.forEach(row => {
          this.multipleSelectionSid.push(row.sid);
        });
      }
      console.log(this.multipleSelectionSid);
    },
    getRowMDKeys(row) {
      return row.sid;
    },

    async changeSelect() {
      this.queryInfo.query = -1;
      this.query = "";
      const {data: res1} = await this.$axios.get("get", {
        params: this.queryInfo
      });
      if (res1.code !== 200) {
        this.mdList = [];
        this.total = 0;
        if (res1.code === 500) {
          return this.$message.warning("信息列表为空！");
        }
        return this.$message.error("获取信息列表失败！");
      }
      this.mdList = res1.data;
      this.total = res1.total;
    }
  }
};
</script>
<!--删除了style的scope 减少权重-->
<style>
.mdTable {
  margin-top: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  /*width: 90px;*/
  color: #000000 !important;
}

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
}

.expand-msg {
  border-radius: 1px !important;
  border: 1px solid rgba(239, 239, 239, 0.36);
  /*height: 50px;*/
  line-height: 50px;
  /*border: 1px solid #000 !important;*/
  /*border-right: none;*/
}

.expand-msg-left {
  border-left: 2px solid rgba(239, 239, 239, 0.36);
}

.table-item {
  margin-bottom: 0px !important;
  line-height: 50px;
  padding-left: 10px;
}

.table-item-span {
  line-height: 50px;
}

.add-button {
  margin-top: 5px;
}

.image-slot {
  /*width: 150px;*/
}

.table-image {
  width: auto;
  height: auto;
  /*max-width: 50%;*/
  /*max-height: 50%;*/
  display: block;
}

/*.el-form-item .table-item label{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item .demo-table-expand{*/
/*  margin-bottom: 0px !important;*/
/*}*/

/*.el-form-item__content{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item__label{*/
/*  padding-left: 10px;*/
/*}*/
.manager-all {
  margin-top: 6px;
  display: flex;
  height: 30px;
  width: 100px;
  justify-content: center;
  margin-bottom: 30px;
}

.project-manager {
  width: 4px;
  height: 30px;
  background: #4087fc;
}

.project-item {
  width: 72px;
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600px;
  color: #333333;
  margin-left: 10px;
  line-height: 30px;
}

.input {
  width: 400px;
  height: 36px;
  background: #fafafa;
  /* border: 1px solid #E6E6E6; */
  border-radius: 18px;
}

/* .row-flex {
  display: flex;
  justify-content: flex-end;
} */
.add {
  width: 140px;
  height: 36px;
  background: #4087fc;
  border-radius: 6px;
}

.el-pagination {
  text-align: center;
  margin-top: 15px;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold !important;
  color: #333333ff;
}

.cell {
  font-size: 15px;
  color: #333333ff;
  font-weight: normal !important;
  text-align: left;
}

/* .el-table__row > td {
  border: none !important;
} */

.el-dialog {
  border-radius: 10px;
}

.hr {
  margin-top: -30px;
  border: none;
  background: #4087fc;
  height: 1.2px;
}

.el-upload-dragger {
  width: 280px;
  height: 150px;
}

.el-dialog__footer {
  text-align: center;
}

.btn-all {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cell {
  text-align: center;
}

.sx {
  width: 1.5px;
  height: 18px;
  /* font-size: 14px;
  font-weight: 400; */
  background: #ccccccff;
}

.addimg {
  width: 22px;
  height: 16px;
  margin-left: 0px;
  margin-top: 0;
  float: left;
}

a {
  text-decoration: none;
  color: #2bbb7f;
}

.MDsearch {
  margin-top: 25px;
  background: rgba(247, 247, 247, 1);
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
}

/* .MDbutton{
 display: flex;
 justify-content: flex-end;
} */
</style>
